<template>
    <div id="content-box">
        <div id="header">
            <div class="one">
                <p class="fa fa-angle-left" @touchstart="back"></p>
            </div>
            <div id="nav-header">购物车</div>
        </div>
        <point></point>
        <div v-if="isrequest">
            <div class="header-box">
                <span class="borderbox one" @touchstart="isshowbtn" v-show="isshow">+</span>
                <span class="borderbox two" v-show="!isshow" @touchstart="notshow">-</span>
                <span class="text">订单优惠</span>
            </div>
            <div class="goods-item" v-for="g in goodsarr" :key="g.goodsname">
                <div class="fl">
                    <img :src="g.pic[0]" alt="" class="item">
                    <div>
                        <p class="text-one">[大号]{{g.goodsname}}</p>
                        <p class="text-two">原产地 : {{g.goodsarea}} 数量 : {{g.count}}</p>
                        <p class="text-three">{{(g.goodsprice*1)|currency("￥",2)}}</p>
                    </div>
                </div>
                <div class="line-two">
                    <div class="fle">
                        <div class="number-box">
                            <div @touchstart="numberDecrease(g)" class="b">-</div>
                            <div class="b">{{g.count}}</div>
                            <div class="b" @touchstart="countjia(g)">+</div>
                        </div>
                        <div class="btns">
                            <button class="shoucangbtn">收藏</button>
                            <button class="removebtn" @touchstart="removeClick(g._id)">删除</button>
                        </div>
                    </div>

                </div>
            </div>
            <div id="mohui">
                <div>共{{c}}件,总价(不含运费) :</div>
                <span>{{(money*1)|currency("￥",2)}}</span>
                <div id="pay">结算</div>
            </div>
        </div>
        <div v-else id="car">
            <div id="car-box"><img src="../assets/cart-empty.png" alt=""><p><router-link to="/login">您还没有登陆,请先登录</router-link></p></div>
        </div>
        <footers></footers>
    </div>
</template>

<script>
import footers from "../components/footers.vue"
import point from "../components/point.vue"
import { mapState, mapGetters } from 'vuex';
import {Toast} from 'mint-ui'
export default {
    data: function() {
        return {
            isshow: true,
            goodsarr: [],
            money: "0",
            c: 0,
            isrequest: false
        }
    },
    components: {
        point,
        footers
    },
    mounted() {
        this.$store.dispatch("loginRequest")
            .then(res => {
                if (res) {
                    this.isrequest = true;
                    this.http.post("/api/goods/car")
                        .then(res => {
                            this.goodsarr = res.data.data;
                            this.totalPrice();
                            this.counts();
                        })
                } else {
                    this.isrequest = false;
                }
            })

    },
    methods: {
        back: function() {
            history.back()
        },
        isshowbtn: function() {
            this.isshow = false;
        },
        notshow: function() {
            this.isshow = true;
        },
        countjia: function(g) {
            g.count++;
            // console.log(g._id);
            var params = {
                count: g.count,
                _id: g._id
            }
            this.http.post("/api/updata", params)
                .then(res => {
                    this.goodsarr = res.data.data;
                    // console.log(this.goodsarr);
                    this.totalPrice();
                    this.counts();

                })
        },
        numberDecrease: function(g) {
            // console.log(g);
            if (g.count > 1) {
                g.count--;
                var params = {
                    count: g.count,
                    _id: g._id
                }
                this.http.post("/api/updata", params)
                    .then(res => {
                        this.goodsarr = res.data.data;
                        this.totalPrice();
                        this.counts();
                    })
            }
        },
        removeClick: function(e) {
            var params = {
                _id: e
            }
            this.http.post("/api/edit/remove", params)
                .then(res => {
                    // this.$layer.alert(res.data.msg);
                    if(res.data.err == "0"){
                        Toast({
                            message: res.data.msg,
                            position: 'middle',
                            duration: 1000
                        });
                    }
                    this.http.post("/api/goods/car")
                        .then(res => {
                            this.goodsarr = res.data.data;
                            this.totalPrice();
                            this.counts();
                        })
                })
        },
        totalPrice: function() {
            var a = 0;
            for (var i = 0; i < this.goodsarr.length; i++) {
                a = this.goodsarr[i].goodsprice * this.goodsarr[i].count + a;
            }
            this.money = a;
        },
        counts: function() {
            var a = 0;
            for (var i = 0; i < this.goodsarr.length; i++) {
                a = this.goodsarr[i].count + a
            }
            this.c = a;
        }
    },
    filters: {
        currency: function(money, prefix = "$", num = 2) {
            var r = money.toFixed(num);
            r = prefix + r;
            return r;
        }
    }

}
</script>

<style scoped>
#mohui {
    height: 55px;
    line-height: 55px;
    width: 100vw;
    position: fixed;
    bottom: 0;
    background-color: rgba(0, 0, 0, .7);
    color: #909090;
    display: flex;
    justify-content: space-around;
}

#mohui span {
    color: #339933;
}

.removebtn {
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 5px;
    color: #666;
}

.shoucangbtn {
    font-size: 14px;
    color: white;
    background-color: gray;
    padding: 8px 15px;
    border-radius: 5px;
    border: none;
}

.fle {
    width: 86vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.btns {
    line-height: 50px;
}

.number-box {
    display: flex;
    width: 90px;
    border-collapse: collapse;
    padding-top: 10px;
}

.b {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: solid 1px #666;
}

.fl {
    display: flex;
}

#header {
    width: 100vw;
    height: 40px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #dcdcdc;
    top: 0;
    display: flex;
}

.one {
    width: 20vw;
    height: 40px;
}

.one p {
    margin: 0;
    padding-left: 15px;
    font-size: 26px;
    line-height: 40px;
    color: #333;
}

#nav-header {
    line-height: 40px;
    width: 60vw;
    text-align: center;
    font-size: 16px;
}

#content-box {
    width: 100vw;
    height: 100vh;
    background-color: #f2f2f2;
}

.header-box {
    width: 96vw;
    height: 53px;
    margin: 0 auto;
    margin-top: 20px;
    /*border: solid 1px black;*/
    background-color: #fff;
}

.one {
    padding-left: 5px;
    padding-right: 5px;
}

.two {
    padding-left: 8px;
    padding-right: 8px;
}

.borderbox {
    margin-left: 10px;
    font-size: 18px;
    vertical-align: middle;
    line-height: 53px;
    border: solid 1px #ddd;
}

.text {
    font-size: 14px;
}

.goods-item {
    width: 96vw;
    height: 180px;
    margin: 0 auto;
    margin-top: 30px;
    background-color: #fff;
}

.item {
    height: 100px;
    width: 100px;
    margin-left: 20px;
    margin-top: 10px;
    background-color: #fff;
}

.text-one {
    margin-left: 25px;
    font-size: 14px;
    color: #353d44;
}

.text-two {
    margin-left: 25px;
    font-size: 12px;
    color: #666;
}

.text-three {
    margin-left: 25px;
    font-size: 18px;
    color: #339933;
}

.line-two {
    width: 96vw;
    height: 60px;
    border-top: 1px dashed #dcdcdc;
    /*border: solid 1px black;*/
}

#pay {
    height: 45px;
    width: 80px;
    text-align: center;
    margin-top: 5px;
    border-radius: 5px;
    line-height: 45px;
    background-color: #339933;
    color: #fff;
}
#car{
    width: 100vw;
    height: 200px;
}
#car-box{
    width: 200px;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
}
#car-box p{
    margin: 0;
    font-size: 14px;  
}
a{
    text-decoration: none;
    font-weight: 700;
    color: #353d44;
    font-family: Arial,Helvetica,STHeiTi,sans-serif;
}
#car img{
    height: 100px;
    width: 120px;
}
</style>